sflite/app/(tabs)/sales/[id].tsx

import { useEffect, useMemo, useState } from 'react';
import {
  Alert,
  Image,
  KeyboardAvoidingView,
  Modal,
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  TextInput,
  View,
} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import DateTimePicker from '@react-native-community/datetimepicker';
import { ResizeMode, Video } from 'expo-av';
import { useLocalSearchParams, useRouter } from 'expo-router';

import { ThemedButton } from '@/components/themed-button';
import { IconButton } from '@/components/icon-button';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { ZoomImageModal } from '@/components/zoom-image-modal';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
import { useTranslation } from '@/localization/i18n';
import { dbPromise, initCoreTables } from '@/services/db';

type FieldRow = {
  id: number;
  name: string | null;
};

type CropRow = {
  id: number;
  crop_name: string | null;
};

type HarvestRow = {
  id: number;
  field_id: number | null;
  crop_id: number | null;
  harvested_at: string | null;
  quantity: number | null;
  unit: string | null;
  field_name: string | null;
  crop_name: string | null;
};

type SaleRow = {
  id: number;
  field_id: number | null;
  crop_id: number | null;
  harvest_id: number | null;
  sold_at: string | null;
  quantity: number | null;
  unit: string | null;
  price: number | null;
  buyer: string | null;
  notes: string | null;
};

type MediaRow = {
  uri: string | null;
};

export default function SaleDetailScreen() {
  const { t } = useTranslation();
  const router = useRouter();
  const { id } = useLocalSearchParams<{ id?: string | string[] }>();
  const saleId = Number(Array.isArray(id) ? id[0] : id);
  const theme = useColorScheme() ?? 'light';
  const palette = Colors[theme];

  const [loading, setLoading] = useState(true);
  const [status, setStatus] = useState('');
  const [fields, setFields] = useState<FieldRow[]>([]);
  const [crops, setCrops] = useState<CropRow[]>([]);
  const [harvests, setHarvests] = useState<HarvestRow[]>([]);
  const [fieldModalOpen, setFieldModalOpen] = useState(false);
  const [cropModalOpen, setCropModalOpen] = useState(false);
  const [harvestModalOpen, setHarvestModalOpen] = useState(false);
  const [selectedFieldId, setSelectedFieldId] = useState<number | null>(null);
  const [selectedCropId, setSelectedCropId] = useState<number | null>(null);
  const [selectedHarvestId, setSelectedHarvestId] = useState<number | null>(null);
  const [saleDate, setSaleDate] = useState('');
  const [showSalePicker, setShowSalePicker] = useState(false);
  const [quantity, setQuantity] = useState('');
  const [unit, setUnit] = useState('');
  const [currency, setCurrency] = useState('THB');
  const [price, setPrice] = useState('');
  const [buyer, setBuyer] = useState('');
  const [notes, setNotes] = useState('');
  const [mediaUris, setMediaUris] = useState<string[]>([]);
  const [activeUri, setActiveUri] = useState<string | null>(null);
  const [errors, setErrors] = useState<{ field?: string; crop?: string; quantity?: string }>({});
  const [zoomUri, setZoomUri] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [showSaved, setShowSaved] = useState(false);

  useEffect(() => {
    let isActive = true;

    async function loadSale() {
      try {
        await initCoreTables();
        const db = await dbPromise;
        const fieldRows = await db.getAllAsync<FieldRow>('SELECT id, name FROM fields ORDER BY name ASC;');
        const cropRows = await db.getAllAsync<CropRow>('SELECT id, crop_name FROM crops ORDER BY crop_name ASC;');
        const profileRow = await db.getFirstAsync<{ currency: string | null }>(
          'SELECT currency FROM user_profile WHERE id = 1;'
        );
        const harvestRows = await db.getAllAsync<HarvestRow>(
          `SELECT h.id, h.field_id, h.crop_id, h.harvested_at, h.quantity, h.unit,
                  f.name as field_name, c.crop_name as crop_name
           FROM harvests h
           LEFT JOIN fields f ON f.id = h.field_id
           LEFT JOIN crops c ON c.id = h.crop_id
           ORDER BY h.harvested_at DESC;`
        );
        const rows = await db.getAllAsync<SaleRow>(
          `SELECT id, field_id, crop_id, harvest_id, sold_at, quantity, unit, price, buyer, notes
           FROM sales WHERE id = ? LIMIT 1;`,
          saleId
        );
        if (!isActive) return;
        setFields(fieldRows);
        setCrops(cropRows);
        setCurrency(profileRow?.currency ?? 'THB');
        setHarvests(harvestRows);
        const sale = rows[0];
        if (!sale) {
          setStatus(t('sales.empty'));
          setLoading(false);
          return;
        }
        setSelectedFieldId(sale.field_id ?? null);
        setSelectedCropId(sale.crop_id ?? null);
        setSelectedHarvestId(sale.harvest_id ?? null);
        setSaleDate(sale.sold_at ?? '');
        setQuantity(sale.quantity !== null ? String(sale.quantity) : '');
        setUnit(sale.unit ?? '');
        setPrice(sale.price !== null ? String(sale.price) : '');
        setBuyer(sale.buyer ?? '');
        setNotes(sale.notes ?? '');
        const mediaRows = await db.getAllAsync<MediaRow>(
          'SELECT uri FROM sale_media WHERE sale_id = ? ORDER BY created_at ASC;',
          saleId
        );
        const media = uniqueMediaUris(mediaRows.map((row) => row.uri).filter(Boolean) as string[]);
        setMediaUris(media);
        setActiveUri(media[0] ?? null);
      } catch (error) {
        if (isActive) setStatus(`Error: ${String(error)}`);
      } finally {
        if (isActive) setLoading(false);
      }
    }

    loadSale();
    return () => {
      isActive = false;
    };
  }, [saleId, t]);

  const selectedField = useMemo(
    () => fields.find((item) => item.id === selectedFieldId),
    [fields, selectedFieldId]
  );
  const selectedCrop = useMemo(
    () => crops.find((item) => item.id === selectedCropId),
    [crops, selectedCropId]
  );
  const selectedHarvest = useMemo(
    () => harvests.find((item) => item.id === selectedHarvestId),
    [harvests, selectedHarvestId]
  );

  const inputStyle = [
    styles.input,
    {
      borderColor: palette.border,
      backgroundColor: palette.input,
      color: palette.text,
    },
  ];
  const unitPresets = ['kg', 'g', 'ton', 'pcs'];

  async function handleUpdate() {
    const parsedQuantity = quantity.trim() ? Number(quantity) : null;
    const nextErrors: { field?: string; crop?: string; quantity?: string } = {};
    if (!selectedFieldId) nextErrors.field = t('sales.fieldRequired');
    if (!selectedCropId) nextErrors.crop = t('sales.cropRequired');
    if (quantity.trim() && !Number.isFinite(parsedQuantity)) {
      nextErrors.quantity = t('sales.quantityInvalid');
    }
    setErrors(nextErrors);
    if (Object.keys(nextErrors).length > 0) return;
    try {
      setSaving(true);
      const db = await dbPromise;
      const now = new Date().toISOString();
      await db.runAsync(
        'UPDATE sales SET field_id = ?, crop_id = ?, harvest_id = ?, sold_at = ?, quantity = ?, unit = ?, price = ?, buyer = ?, notes = ? WHERE id = ?;',
        selectedFieldId,
        selectedCropId,
        selectedHarvestId,
        saleDate || null,
        parsedQuantity,
        unit.trim() || null,
        price.trim() ? Number(price) : null,
        buyer.trim() || null,
        notes.trim() || null,
        saleId
      );
      await db.runAsync('DELETE FROM sale_media WHERE sale_id = ?;', saleId);
      const mediaToInsert = uniqueMediaUris(mediaUris);
      for (const uri of mediaToInsert) {
        await db.runAsync(
          'INSERT INTO sale_media (sale_id, uri, media_type, created_at) VALUES (?, ?, ?, ?);',
          saleId,
          uri,
          isVideoUri(uri) ? 'video' : 'image',
          now
        );
      }
      setStatus(t('sales.saved'));
      setShowSaved(true);
      setTimeout(() => {
        setShowSaved(false);
        setStatus('');
      }, 1800);
    } catch (error) {
      setStatus(`Error: ${String(error)}`);
    } finally {
      setSaving(false);
    }
  }

  function confirmDelete() {
    Alert.alert(
      t('sales.deleteTitle'),
      t('sales.deleteMessage'),
      [
        { text: t('sales.cancel'), style: 'cancel' },
        {
          text: t('sales.delete'),
          style: 'destructive',
          onPress: async () => {
            const db = await dbPromise;
            await db.runAsync('DELETE FROM sale_media WHERE sale_id = ?;', saleId);
            await db.runAsync('DELETE FROM sales WHERE id = ?;', saleId);
            router.back();
          },
        },
      ]
    );
  }

  const harvestLabel = selectedHarvest
    ? `${selectedHarvest.field_name || ''} ${selectedHarvest.crop_name || ''}, ${selectedHarvest.quantity ?? ''} ${selectedHarvest.unit ?? ''}, ${selectedHarvest.harvested_at ?? ''}`.trim()
    : t('sales.selectHarvest');

  if (loading) {
    return (
      <ThemedView style={[styles.container, { backgroundColor: palette.background }]}>
        <ThemedText>{t('sales.loading')}</ThemedText>
      </ThemedView>
    );
  }

  return (
    <ThemedView style={[styles.container, { backgroundColor: palette.background }]}>
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
        style={styles.keyboardAvoid}>
        <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
          <ThemedText type="title">{t('sales.edit')}</ThemedText>
          {status && !showSaved ? <ThemedText>{status}</ThemedText> : null}

          <ThemedText>{t('sales.field')}</ThemedText>
          <ThemedButton
            title={selectedField?.name || t('sales.selectField')}
            onPress={() => setFieldModalOpen(true)}
            variant="secondary"
          />
          {errors.field ? <ThemedText style={styles.errorText}>{errors.field}</ThemedText> : null}

          <ThemedText>{t('sales.crop')}</ThemedText>
          <ThemedButton
            title={selectedCrop?.crop_name || t('sales.selectCrop')}
            onPress={() => setCropModalOpen(true)}
            variant="secondary"
          />
          {errors.crop ? <ThemedText style={styles.errorText}>{errors.crop}</ThemedText> : null}

          <ThemedText>{t('sales.harvest')}</ThemedText>
          <ThemedButton
            title={harvestLabel || t('sales.selectHarvest')}
            onPress={() => setHarvestModalOpen(true)}
            variant="secondary"
          />

          <ThemedText>{t('sales.date')}</ThemedText>
          <Pressable onPress={() => setShowSalePicker(true)} style={styles.dateInput}>
            <ThemedText style={styles.dateValue}>
              {saleDate || t('sales.datePlaceholder')}
            </ThemedText>
          </Pressable>
          {showSalePicker ? (
            <DateTimePicker
              value={saleDate ? new Date(saleDate) : new Date()}
              mode="date"
              onChange={(event, date) => {
                setShowSalePicker(false);
                if (date) setSaleDate(toDateOnly(date));
              }}
            />
          ) : null}

          <ThemedText>{t('sales.quantity')}</ThemedText>
          <TextInput
            value={quantity}
            onChangeText={(value) => {
              setQuantity(value);
              if (errors.quantity) setErrors((prev) => ({ ...prev, quantity: undefined }));
            }}
            placeholder={t('sales.quantityPlaceholder')}
            placeholderTextColor={palette.placeholder}
            style={inputStyle}
            keyboardType="decimal-pad"
          />
          {errors.quantity ? <ThemedText style={styles.errorText}>{errors.quantity}</ThemedText> : null}

          <ThemedText>{t('sales.unit')}</ThemedText>
          <View style={styles.chipRow}>
            {unitPresets.map((preset) => {
              const label = t(`units.${preset}`);
              const isActive = unit === label || unit === preset;
              return (
                <Pressable
                  key={preset}
                  style={[styles.chip, isActive ? styles.chipActive : null]}
                  onPress={() => setUnit(label)}>
                  <ThemedText style={styles.chipText}>{label}</ThemedText>
                </Pressable>
              );
            })}
          </View>
          <TextInput
            value={unit}
            onChangeText={setUnit}
            placeholder={t('sales.unitPlaceholder')}
            placeholderTextColor={palette.placeholder}
            style={inputStyle}
          />

          <ThemedText>{t('sales.price')} ({currency})</ThemedText>
          <TextInput
            value={price}
            onChangeText={setPrice}
            placeholder={t('sales.pricePlaceholder')}
            placeholderTextColor={palette.placeholder}
            style={inputStyle}
            keyboardType="decimal-pad"
          />

          <ThemedText>{t('sales.buyer')}</ThemedText>
          <TextInput
            value={buyer}
            onChangeText={setBuyer}
            placeholder={t('sales.buyerPlaceholder')}
            placeholderTextColor={palette.placeholder}
            style={inputStyle}
          />

          <ThemedText>{t('sales.notes')}</ThemedText>
          <TextInput
            value={notes}
            onChangeText={setNotes}
            placeholder={t('sales.notesPlaceholder')}
            placeholderTextColor={palette.placeholder}
            style={inputStyle}
            multiline
          />

          <ThemedText>{t('sales.addMedia')}</ThemedText>
          {normalizeMediaUri(activeUri) ? (
            isVideoUri(normalizeMediaUri(activeUri) as string) ? (
              <Video
                source={{ uri: normalizeMediaUri(activeUri) as string }}
                style={styles.mediaPreview}
                useNativeControls
                resizeMode={ResizeMode.CONTAIN}
              />
            ) : (
              <Pressable onPress={() => setZoomUri(normalizeMediaUri(activeUri) as string)}>
                <Image source={{ uri: normalizeMediaUri(activeUri) as string }} style={styles.mediaPreview} resizeMode="contain" />
              </Pressable>
            )
          ) : (
            <ThemedText style={styles.photoPlaceholder}>{t('sales.noPhoto')}</ThemedText>
          )}

          {mediaUris.length > 0 ? (
            <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.mediaStrip}>
              {mediaUris.map((uri) => (
                <Pressable key={uri} style={styles.mediaChip} onPress={() => setActiveUri(uri)}>
                  {isVideoUri(uri) ? (
                    <View style={styles.videoThumb}>
                      <ThemedText style={styles.videoThumbText}>▶</ThemedText>
                    </View>
                  ) : (
                    <Image source={{ uri }} style={styles.mediaThumb} resizeMode="cover" />
                  )}
                  <Pressable
                    style={styles.mediaRemove}
                    onPress={(event) => {
                      event.stopPropagation();
                      setMediaUris((prev) => {
                        const next = prev.filter((item) => item !== uri);
                        setActiveUri((current) => (current === uri ? next[0] ?? null : current));
                        return next;
                      });
                    }}>
                    <ThemedText style={styles.mediaRemoveText}>×</ThemedText>
                  </Pressable>
                </Pressable>
              ))}
            </ScrollView>
          ) : null}

          <View style={styles.photoRow}>
            <ThemedButton
              title={t('sales.pickFromGallery')}
              onPress={() =>
                handlePickMedia((uris) => {
                  if (uris.length === 0) return;
                  setMediaUris((prev) => uniqueMediaUris([...prev, ...uris]));
                  setActiveUri((prev) => prev ?? uris[0]);
                })
              }
              variant="secondary"
            />
            <ThemedButton
              title={t('sales.takeMedia')}
              onPress={() =>
                handleTakeMedia((uri) => {
                  if (!uri) return;
                  setMediaUris((prev) => uniqueMediaUris([...prev, uri]));
                  setActiveUri((prev) => prev ?? uri);
                })
              }
              variant="secondary"
            />
          </View>

          <View style={styles.actions}>
            <IconButton
              name="trash"
              onPress={confirmDelete}
              accessibilityLabel={t('sales.delete')}
              variant="danger"
            />
            <View style={styles.updateGroup}>
              {showSaved ? <ThemedText style={[styles.inlineToastText, { color: palette.success }]}>{t('sales.saved')}</ThemedText> : null}
              <ThemedButton
                title={saving ? t('sales.saving') : t('sales.update')}
                onPress={handleUpdate}
                disabled={saving}
              />
            </View>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>

      <Modal transparent visible={fieldModalOpen} animationType="fade">
        <Pressable style={styles.modalBackdrop} onPress={() => setFieldModalOpen(false)}>
          <View style={styles.modalCard}>
            <ThemedText type="subtitle">{t('sales.selectField')}</ThemedText>
            <ScrollView style={styles.modalList}>
              {fields.map((item) => (
                <Pressable
                  key={item.id}
                  style={styles.modalItem}
                  onPress={() => {
                    setSelectedFieldId(item.id);
                    setFieldModalOpen(false);
                  }}>
                  <ThemedText>{item.name || t('sales.noField')}</ThemedText>
                </Pressable>
              ))}
            </ScrollView>
          </View>
        </Pressable>
      </Modal>

      <Modal transparent visible={cropModalOpen} animationType="fade">
        <Pressable style={styles.modalBackdrop} onPress={() => setCropModalOpen(false)}>
          <View style={styles.modalCard}>
            <ThemedText type="subtitle">{t('sales.selectCrop')}</ThemedText>
            <ScrollView style={styles.modalList}>
              {crops.map((item) => (
                <Pressable
                  key={item.id}
                  style={styles.modalItem}
                  onPress={() => {
                    setSelectedCropId(item.id);
                    setCropModalOpen(false);
                  }}>
                  <ThemedText>{item.crop_name || t('sales.noCrop')}</ThemedText>
                </Pressable>
              ))}
            </ScrollView>
          </View>
        </Pressable>
      </Modal>

      <Modal transparent visible={harvestModalOpen} animationType="fade">
        <Pressable style={styles.modalBackdrop} onPress={() => setHarvestModalOpen(false)}>
          <View style={styles.modalCard}>
            <ThemedText type="subtitle">{t('sales.selectHarvest')}</ThemedText>
            <ScrollView style={styles.modalList}>
              {harvests.map((item) => (
                <Pressable
                  key={item.id}
                  style={styles.modalItem}
                  onPress={() => {
                    setSelectedHarvestId(item.id);
                    setSelectedFieldId(item.field_id ?? null);
                    setSelectedCropId(item.crop_id ?? null);
                    setHarvestModalOpen(false);
                  }}>
                  <ThemedText>
                    {item.field_name || ''} {item.crop_name || ''}, {item.quantity ?? ''} {item.unit ?? ''}, {item.harvested_at ?? ''}
                  </ThemedText>
                </Pressable>
              ))}
            </ScrollView>
          </View>
        </Pressable>
      </Modal>

      <ZoomImageModal uri={zoomUri} visible={Boolean(zoomUri)} onClose={() => setZoomUri(null)} />
    </ThemedView>
  );
}

async function handlePickMedia(onAdd: (uris: string[]) => void) {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: getMediaTypes(),
    quality: 1,
    allowsMultipleSelection: true,
    selectionLimit: 0,
  });
  if (result.canceled) return;
  const uris = (result.assets ?? []).map((asset) => asset.uri).filter(Boolean) as string[];
  if (uris.length === 0) return;
  onAdd(uris);
}

async function handleTakeMedia(onAdd: (uri: string | null) => void) {
  const permission = await ImagePicker.requestCameraPermissionsAsync();
  if (!permission.granted) {
    return;
  }
  const result = await ImagePicker.launchCameraAsync({
    mediaTypes: getMediaTypes(),
    quality: 1,
  });
  if (result.canceled) return;
  const asset = result.assets[0];
  onAdd(asset.uri);
}

function getMediaTypes() {
  const mediaType = (ImagePicker as {
    MediaType?: { Image?: unknown; Images?: unknown; Video?: unknown; Videos?: unknown };
  }).MediaType;
  const imageType = mediaType?.Image ?? mediaType?.Images;
  const videoType = mediaType?.Video ?? mediaType?.Videos;
  if (imageType && videoType) {
    return [imageType, videoType];
  }
  return imageType ?? videoType ?? ['images', 'videos'];
}

function isVideoUri(uri: string) {
  return /\.(mp4|mov|m4v|webm|avi|mkv)(\?.*)?$/i.test(uri);
}

function normalizeMediaUri(uri?: string | null) {
  if (typeof uri !== 'string') return null;
  const trimmed = uri.trim();
  return trimmed ? trimmed : null;
}

function uniqueMediaUris(uris: string[]) {
  const seen = new Set<string>();
  const result: string[] = [];
  for (const uri of uris) {
    if (!uri || seen.has(uri)) continue;
    seen.add(uri);
    result.push(uri);
  }
  return result;
}

function toDateOnly(date: Date) {
  return date.toISOString().slice(0, 10);
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  keyboardAvoid: {
    flex: 1,
  },
  content: {
    padding: 16,
    gap: 10,
    paddingBottom: 40,
  },
  input: {
    borderRadius: 10,
    borderWidth: 1,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 15,
  },
  errorText: {
    color: '#C0392B',
    fontSize: 12,
  },
  dateInput: {
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#B9B9B9',
    paddingHorizontal: 12,
    paddingVertical: 10,
  },
  dateValue: {
    opacity: 0.7,
  },
  mediaPreview: {
    width: '100%',
    height: 220,
    borderRadius: 12,
    backgroundColor: '#1C1C1C',
  },
  photoRow: {
    flexDirection: 'row',
    gap: 8,
  },
  actions: {
    marginTop: 12,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    gap: 10,
  },
  photoPlaceholder: {
    opacity: 0.6,
  },
  mediaStrip: {
    marginTop: 6,
  },
  mediaChip: {
    width: 72,
    height: 72,
    borderRadius: 10,
    marginRight: 8,
    overflow: 'hidden',
    backgroundColor: '#E6E1D4',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mediaThumb: {
    width: '100%',
    height: '100%',
  },
  videoThumb: {
    width: '100%',
    height: '100%',
    backgroundColor: '#1C1C1C',
    alignItems: 'center',
    justifyContent: 'center',
  },
  videoThumbText: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: '700',
  },
  mediaRemove: {
    position: 'absolute',
    top: 4,
    right: 4,
    width: 18,
    height: 18,
    borderRadius: 9,
    backgroundColor: 'rgba(0,0,0,0.6)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mediaRemoveText: {
    color: '#FFFFFF',
    fontSize: 12,
    lineHeight: 14,
    fontWeight: '700',
  },
  updateGroup: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  inlineToastText: {
    fontWeight: '700',
    fontSize: 12,
  },
  chipRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
    marginBottom: 8,
  },
  chip: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 999,
    borderWidth: 1,
    borderColor: '#D9D1C2',
    backgroundColor: '#F8F6F0',
  },
  chipActive: {
    backgroundColor: '#DDE8DA',
    borderColor: '#88A68F',
  },
  chipText: {
    fontSize: 13,
  },
  modalBackdrop: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.4)',
    justifyContent: 'center',
    padding: 24,
  },
  modalCard: {
    borderRadius: 14,
    backgroundColor: '#FFFFFF',
    padding: 16,
    gap: 10,
    maxHeight: '80%',
  },
  modalList: {
    maxHeight: 300,
  },
  modalItem: {
    paddingVertical: 10,
  },
});